<template>
  <div>
    <datepicker
      v-model="selectedDate"
      :custom-day-render="customDayRender"
      :first-day-of-week="1"
      :inline="true"
      :language="customLanguage"
      :render-header="renderHeader"
    ></datepicker>
  </div>
</template>

<script>
import Datepicker from 'vue2-datepicker';
import 'vue2-datepicker/locale/zh-cn';
import 'vue2-datepicker/index.css';

export default {
  components: {
    Datepicker
  },
  data() {
    return {
      selectedDate: new Date(),
      customLanguage: 'zh-cn' // 设置语言为中文
    };
  },
  methods: {
    // 自定义日的渲染方法，你可以根据需要进行修改
    customDayRender(date) {
      // 这里可以根据业务逻辑进行日期的自定义渲染
    },
    // 自定义日历头部内容
    renderHeader(slotProps) {
      const { date, decreaseMonth, increaseMonth, decreaseYear, increaseYear } = slotProps;

      const year = date.getFullYear();
      const month = date.getMonth() + 1;

      return (
        <div class="custom-header">
          <span class="switch" onClick={decreaseYear}>« </span>
          <span class="switch" onClick={decreaseMonth}>‹ </span>
          <span>{year}年{month}月</span>
          <span class="switch" onClick={increaseMonth}> ›</span>
          <span class="switch" onClick={increaseYear}> »</span>
        </div>
      );
    }
  }
};
</script>

<style scoped>
.custom-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.switch {
  cursor: pointer;
  margin: 0 5px;
}
</style>
